<template>
    <view class="return-cart-bar">
        <view class="bottom-bar">
            <view class="cart-rel touch" @click="cartShow" v-if="selectType == 4">
                <uni-badge size="small" :text="total.class" absolute="rightTop" type="error"
                    :offset="[-60, -45]"></uni-badge>
                <uni-icons size="40" type="cart" customIcons="icon-white"></uni-icons>
            </view>
            <view class="cart-rel touch" @click="cartShow" v-else>
                <uni-badge size="small" :text="total.class" absolute="rightTop" type="error"
                    :offset="[-60, -45]"></uni-badge>
                <uni-icons size="40" type="cart" customIcons="icon-white"></uni-icons>
            </view>
            <!-- 一客一价新增 -->
            <view class="cart-right" v-if="selectType == 4">
                <text class="price">种类：{{ total.class }}</text>
                <button class="btn btn-success" :class="isDisable(getValetCartData) ? 'disable' : ''" @click="nextFn"
                    :disabled="isDisable(getValetCartData)">
                    去新增
                </button>
            </view>

            <view class="cart-right" v-else>
                <text class="price" v-if="!cartOpen">金额：<text>{{ total.totalPrice }}</text>元</text>
                <view class="cart-kind" v-else>
                    <text class="price"><text>{{ total.totalPrice }}</text>元</text>
                    <text class="kind">种类：{{ total.class }}；数量：{{ total.totalNum }}</text>
                </view>
                <button class="btn btn-success" :class="isDisable(getValetCartData) ? 'disable' : ''" @click="nextFn"
                    :disabled="isDisable(getValetCartData)">
                    去结算
                </button>
            </view>
        </view>
        <uni-popup type="bottom" ref="cart" @change="close" :safe-area="false">
            <!-- -->
            <view class="popup-content">
                <view class="popup-title">
                    <view class="popup-title-text">已选商品</view>
                    <text class="popup-title-action" @click="closePopup">清空</text>
                </view>
                <view class="flex-v-c" style="padding-bottom: 20rpx">
                    <image src="@/static/img/ck-icon.png" style="width: 32rpx; height: 32rpx; margin-right: 12rpx">
                    </image>
                    <view>发货仓库：{{ warehouse }}</view>
                </view>
                <scroll-view scroll-y="true" class="scroll">
                    <view class="cart-item" v-if="!refresh" v-for="(cartItem, index) in getValetCartData"
                        :key="cartItem.ProductId">
                        <cart-item-product :productData="cartItem"></cart-item-product>
                        <cart-item-specs :spaceItem="spaceItem" :valetUserId="valetUserId" :warehouseId="warehouseId"
                            v-for="(spaceItem, spaceIndex) in cartItem.SubItems" :key="spaceItem.ID"
                            :selectType="selectType" @delItem="delItem"></cart-item-specs>
                    </view>
                </scroll-view>
            </view>
        </uni-popup>
    </view>
</template>

<script>
import { mapMutations, mapState, mapGetters } from "vuex"
import cartItemProduct from "@/components/returnCart/cart-item-product.vue"
import cartItemSpecs from "@/components/returnCart/cart-item-specs.vue"
import { GetWarehouseList } from "@/service/api/warehouse.js"
import { deleteRefundOrderTemp, getTempCartTotal } from "@/utils/valetCartUtil.js"
export default {
    name: "returnSalesCart",
    components: {
        cartItemProduct,
        cartItemSpecs,
    },
    props: {
        valetUserInfo: {
            type: String,
            default: () => { },
        },
        valetUserId: {
            type: Number,
            default: 0,
        },
        warehouseId: {
            type: Number,
            default: 0,
        },
        isShowCar: {
            type: String,
            default: "",
        },
        selectType: {
            type: [String, Number],
            default: ""
        }
    },
    data() {
        return {
            warehouse: "",
            cartOpen: false,
            cartList: [],
            total: {
                totalNum: 0,
                totalPrice: 0,
                class: 0,
            },
            refresh: false,
            storeUserInfo: null,
        }
    },
    watch: {
        getValetCartData(e) {
            this.getTotal()
            this.$forceUpdate()
        },
        warehouseId(newVal, oldVal) {
            // newVal是新值，oldVal是旧值
            this.warehouseId = newVal
            this.GetWarehouseList()
        },
    },
    computed: {
        ...mapGetters(["getValetCartData"]),
    },
    mounted() {
        this.getTotal()
        if (this.isShowCar) {
            this.$refs.cart.open()
        }
        this.GetWarehouseList()
    },
    methods: {
        getTotal() {
            getTempCartTotal(this.getValetCartData, (back) => {
                this.total = {
                    totalNum: back.totalNum,
                    totalPrice: back.totalPrice,
                    class: back.class,
                }
            })
        },
        GetWarehouseList() {
            GetWarehouseList().then((res) => {
                if (res.State == 1) {
                    let warehousename = res.Data.filter((e) => {
                        return e.WarehouseId == this.warehouseId
                    })
                    this.warehouse = warehousename[0].WarehouseName
                }
            })
        },
        cartShow() {
            this.cartOpen = !this.cartOpen
            if (this.cartOpen) {
                this.$refs.cart.open()
            } else {
                this.$refs.cart.close()
            }
        },
        close(e) {
            if (e.show == false) {
                this.cartOpen = false
            }
        },
        closePopup() {
            let param = {
                ids: this.getIds(),
                storeUserId: this.valetUserId,
            }

            deleteRefundOrderTemp(param).then((res) => {
                this.cartShow()
            })
        },
        getIds() {
            let ids = []
            this.getValetCartData.forEach((pro) => {
                pro.SubItems.forEach((sub) => {
                    ids.push(String(sub.ID))
                })
            })
            let value = ""
            if (ids.length > 0) {
                value = ids.join(",")
            }
            return value
        },
        isDisable(data) {
            return !data || data.length < 1
        },
        nextFn() {
            if (this.cartOpen) {
                this.cartShow()
            }
            let ids = this.getIds()
            if (ids.length > 0) {
                // this.easyGoTo('/pages/order/add-order?ids='+ids + "&valetUserInfo="+ this.valetUserInfo )
                if (this.selectType == 3) {
                    // 报价下单
                    this.easyGoTo(
                        "/pages/customer/offer-order?valetUserId=" +
                        this.valetUserId +
                        "&valetUserInfo=" +
                        this.valetUserInfo +
                        "&warehouseId=" +
                        this.warehouseId,
                    )
                } else if (this.selectType == 4) {
                    // 报价下单
                    this.easyGoTo(
                        "/pages/private/edit?valetUserId=" +
                        this.valetUserId +
                        "&valetUserInfo=" +
                        this.valetUserInfo +
                        "&warehouseId=" +
                        this.warehouseId,
                    )
                } else {
                    this.easyGoTo(
                        "/pages/customer/replace-order?valetUserId=" +
                        this.valetUserId +
                        "&valetUserInfo=" +
                        this.valetUserInfo +
                        "&warehouseId=" +
                        this.warehouseId,
                    )
                }
            }
        },
        delItem() { },
    },
}
</script>

<style lang="scss" scoped>
.return-cart-bar {
    position: relative;
    z-index: 1;
}

.bottom-bar {
    padding-left: 55rpx;
    justify-content: space-between;
    z-index: 100;
    height: 120rpx;

    .cart-rel {
        position: relative;
        width: 80rpx;
        height: 80rpx;
        background: $app-color-main;
        border-radius: 50%;
        border: 6rpx solid #ffffff;
        display: flex;
        align-items: center;
        justify-content: center;
        top: -30rpx;
    }

    .cart-right {
        display: flex;
        justify-content: flex-end;
        align-items: center;

        .cart-kind {
            display: flex;
            flex-direction: column;
            text-align: right;
        }
    }

    .price {
        font-size: $font-size-28;

        text {
            font-size: $font-size-32;
            font-weight: 500;
            color: #fe0000;
        }
    }

    .btn {
        padding: 0;
        margin-left: $app-page-padding;
        width: 220rpx;
        height: 80rpx;
        // background: $app-color-main;
        border-radius: 45rpx;
        font-size: 32rpx;
        color: #ffffff;
    }

    .disable {
        background: #f7f7f7;
        color: #ccc;
    }
}

// 弹窗组件
.popup-content {
    width: auto;
    display: flex;
    flex-direction: column;
    position: relative;
    background: #f5f5f5;
    border-radius: 24rpx 24rpx 0 0;
    padding-right: $app-page-padding;
    padding-left: $app-page-padding;
    padding-bottom: 120rpx;
    z-index: 0;

    .popup-title {
        display: flex;
        justify-content: space-between;
        align-items: center;
        height: 100rpx;

        .popup-title-text {}

        .popup-title-action {}
    }

    .scroll {
        max-height: 700rpx;

        .cart-item {
            background: $color-white;
            padding: 0 $app-page-padding;
            border-radius: $border-radius-10;
            margin-bottom: 20rpx;
        }
    }
}
</style>
